<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back"
        ><image class="back" src="/static/img/back.png"></image></view
      >器材台账
    </view>

    <!-- <view class="top-bg"></view> -->
	<view class="sss" @click="show_search=true">
		筛选
	</view>
	<!-- <image class="select" src="/static/img/select.png"></image> -->
	<view class="detail">
      <view class="table-item">
	          <view class="items" v-for="(item, index) in list" :key="index">
	            <view class="name" @click="jumpDetail(item)">
	               器材名称  <text class='fr11'>{{ item.zcEquname || "" }}</text>
	            </view>
	            <view class="name"> 器材编码 <text class='fr11'>{{ item.zcCode }}</text> </view>
	            <view class="name">  标签码 <text class='fr11'> {{ item.labelCode }} </text></view>
	            <button class="click-btn" @click="checkCode(item)">关联扫码</button>
	          </view>
	        </view>
	</view>

   <!-- <view class="detail">
      <u-cell-group style="padding: 0 0 0 15px">
        <u-cell-item
          title="专业"
          :value="form.profession == '' ? '请选择' : form.profession"
          @click="
            show_picker = true;
            columns = profession_options;
          "
        ></u-cell-item>
        <u-cell-item
          title="所在机构"
          :value="form.org == '' ? '请选择' : form.org"
          @click="showORG"
        ></u-cell-item>
        <u-cell-item
          title="线路"
          :value="form.line == '' ? '请选择' : form.line"
          @click="
            show_picker = true;
            columns = line_options;
          "
        ></u-cell-item>

        <u-cell-item
          title="所在地点"
          :value="form.station == '' ? '请选择' : form.station"
          @click="OnStationClick"
        ></u-cell-item>
        <u-cell-item
          title="器材类型"
          :value="form.type == '' ? '请选择' : form.type"
          @click="typeClick"
        ></u-cell-item>
        <u-radio-group
          v-model="form.checklabel"
          style="height: 50px; width: 100%"
          placement="row"
        >
          <text
            style="display: inline-block; line-height: 50px; margin-right: 13%"
            >是否已关联标签:</text
          >
          <u-radio :name="1" :disabled="false">已关联</u-radio>
          <u-radio :name="2" :disabled="false">未关联</u-radio>
        </u-radio-group>
        <view class="list-btn"
          ><b>器材列表</b>
          <view style="display: flex; margin: 0 10px 0 0">
            <button class="default-btns" @click="searchList">查询</button>
            <button class="default-btns s1" @click="clear">清空</button>
          </view>
        </view>
      </u-cell-group>
	  

    <view class="full" v-show="show_picker"></view>
    <u-select
      v-model="show_picker"
      :list="columns"
      label-name="text"
      @confirm="onConfirm"
      @cancel="onCancel"
    ></u-select>

    <ljs-treeChoose
      :data="org_options"
      @getChooseValue="orgchange"
      @close="orgcancle"
      v-if="show.orgShow"
    />
    <ljs-treeChoose
      :data="type_options"
      @getChooseValue="typechange"
      @close="typecancle"
      v-if="show.typeShow"
    /> -->
    <u-modal
      v-model="modal_show"
      :show-title="false"
      @confirm="confirm"
      show-cancel-button
      :content="modal_content"
    ></u-modal>
    <u-modal
      v-model="message_show"
      :show-title="false"
      show-cancel-button
      @confirm="messageConfirm"
      :content="message_con"
    ></u-modal>
	<MaterialSearch v-show="show_search" @closeMaterialSearch="closeMaterialSearch" @close="close"></MaterialSearch>
  </view>
</template>

<script>
	import MaterialSearch from "../../components/device/materialSearch";
import { mapState } from "vuex";
import { PMS_DICT_CONTROLLER } from "../../api/pms";
import { TYPECONTROLLER, ZCCONTROLLER } from "../../api/eqt";
export default {
	components: { MaterialSearch },
  data() {
    return {
		show_search:false,
      message_show: false,
      message_con: "已关联标签，是否重新关联~",
      current: {
        id: "",
        currentLabel: "",
      },
      // show: {
      //   orgShow: false,
      //   typeShow: false,
      // },
      // org_options: [],
      // profession_options: [],
      // line_options: [],
      // typeTemp: [],
      // type_options: [],
      // station_options: [],
      // columns: [],
      modal_show: false,
      modal_content: "是否关联绑定~",
      list: [],

      form: {
        page: 1, //页数
        orgId: "", //机构id
        lineId: "", //线路id
        stationId: "", //车站id
        equTypeId: "", //器材类型id
        profession: "",
        line: "",
        org: "",
        station: "",
        type: "",
        checklabel: 1,
      },
      flog: true,
      // show_picker: false,
    };
  },
  computed: {
    ...mapState(["workProfession", "lineTree", "reeByOrgnum"]),
  },
  created() {
    // this.initTypelist();
    this.initList();

    // this.line_options = this.lineTree.map((item) => {
    //   return {
    //     value: item.idK,
    //     text: item.name,
    //     extra: {
    //       type: "line",
    //     },
    //   };
    // });
    // this.profession_options = this.workProfession.map((i) => {
    //   return {
    //     value: i.value,
    //     text: i.value,
    //     extra: {
    //       type: "profession",
    //     },
    //   };
    // });
  },
  onReachBottom() {
    if (!this.flog)
      return uni.showToast({ title: "已无最新数据", icon: "none" });
    // this.form.page++;
    this.initList();
  },
  methods: {
	  close(){
		  this.show_search = false;
	  },
	  closeMaterialSearch(obj){
		  this.show_search = false;
		  this.form = {...obj}
		  this.list = [];
		    this.flog = true;
		    this.form.page = 1;
		  this.initList()
	  },
	  // search(){
		 //  console.log('筛选')
		 //  this.show_search=true;
	  // },
    // clear() {
    //   this.form = {
    //     page: 1, //页数
    //     orgId: "", //机构id
    //     lineId: "", //线路id
    //     stationId: "", //车站id
    //     equTypeId: "", //器材类型id
    //     profession: "",
    //     line: "",
    //     org: "",
    //     station: "",
    //     type: "",
    //     checklabel: 1,
    //   };
    // },
    jumpDetail(item) {
      uni.navigateTo({
        url: "/pages/material/materialDetail",
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("acceptDataFromOpenerPage", {
            data: item,
          });
        },
      });
    },
    // OnStationClick() {
    //   if (this.form.line) {
    //     this.show_picker = true;
    //     this.columns = this.station_options;
    //   } else {
    //     uni.showToast({ title: "请选择线路~", type: "warning", icon: "none" });
    //   }
    // },
    // typeClick() {
    //   let self = this;
    //   this.show.typeShow = true;
    //   self.type_options = self.typeTemp.map((item) => self.mapTree1(item));
    // },
    // mapTree1(item) {
    //   let has = Array.isArray(item.children) && item.children.length > 0;
    //   return {
    //     id: item.id,
    //     label: item.text,
    //     openTag: false,
    //     choose: false,
    //     children: has ? item.children.map((i) => this.mapTree1(i)) : [],
    //   };
    // },
    // showORG() {
    //   let self = this;
    //   this.show.orgShow = true;
    //   self.org_options = self.reeByOrgnum.map((org) => self.mapTree(org));
    // },
    // mapTree(org) {
    //   const haveChildren =
    //     Array.isArray(org.children) && org.children.length > 0;
    //   return {
    //     id: org.id,
    //     label: org.text,
    //     openTag: false,
    //     choose: false,
    //     children: haveChildren ? org.children.map((i) => this.mapTree(i)) : [],
    //   };
    // },

    // orgchange(a, items) {
    //   this.form.org = items[items.length - 1].label;
    //   this.form.orgId = items[items.length - 1].id;
    //   setTimeout(() => {
    //     this.orgcancle();
    //   }, 500);
    // },
    // typechange(a, items) {
    //   this.form.type = items[items.length - 1].label;
    //   this.form.equTypeId = items[items.length - 1].id;
    //   setTimeout(() => {
    //     this.typecancle();
    //   }, 500);
    // },
    // orgcancle() {
    //   this.show.orgShow = false;
    // },
    // typecancle() {
    //   this.show.typeShow = false;
    // },
    back() {
      uni.navigateBack();
    },
    // onConfirm(value) {
    //   if (value[0].extra.type == "line") {
    //     this.form.line = value[0].label;
    //     this.form.lineId = value[0].value;
    //     this.getStation(value[0].value);
    //   } else if (value[0].extra.type == "profession") {
    //     this.form.profession = value[0].label;
    //   } else if (value[0].extra.type == "station") {
    //     this.form.station = value[0].label;
    //     this.form.stationId = value[0].value;
    //   }

    //   this.onCancel();
    // },
    // onCancel() {
    //   this.show_picker = false;
    // },
    searchList() {
      this.list = [];
      this.flog = true;
      this.form.page = 1;
      this.initList();
    },
    // initTypelist() {
    //   this.fetch(
    //     "GET",
    //     this.$store.state.baseUrl + TYPECONTROLLER.EQUTYPETREE,
    //     {
    //       vtype: "2Q",
    //     },
    //     true
    //   ).then((res) => {
    //     if (res && res.data && res.data.length > 0) {
    //       this.typeTemp = res.data;
    //     } else {
    //       this.typeTemp = [];
    //     }
    //   });
    // },
    // getStation(id) {
    //   if (id) {
    //     this.fetch(
    //       "get",
    //       this.$store.state.baseUrl + PMS_DICT_CONTROLLER.GET_NAME_BY_LINEID,
    //       { lineId: id }
    //     ).then((res) => {
    //       if (res && res.data && res.data.length > 0) {
    //         this.station_options = res?.data.map((i) => {
    //           return {
    //             value: i.code,
    //             text: i.name,
    //             extra: {
    //               type: "station",
    //             },
    //           };
    //         });
    //       } else {
    //         this.station_options = [];
    //       }
    //     });
    //   } else {
    //     this.station_options = [];
    //   }
    // },
    messageConfirm() {
      console.log("开始扫码");
      uni.scanCode({
		scanType:['barCode','qrCode','datamatrix','pdf417'],
        success: (res) => {
          if (res && res.result) {
            this.modal_show = true;
            this.modal_content = `是否关联${res.result}标签~`;
            this.current.currentLabel = res.result;
          } 
        },
		fail() {
			uni.showToast({
			  title: "无效码，请确认~",
			  icon: "none",
			});
		}
      });
    },
    confirm() {
      console.log("确认关联绑定");
      this.fetch(
        "GET",
        this.$store.state.baseUrl + ZCCONTROLLER.LABEL_BINGDING,
        {
          id: this.current.id,
          LabelCode: this.current.currentLabel,
        }
      ).then((res) => {
        console.log(res);
        if (res.data == "success") {
          uni.showToast({
            title: "关联成功！",
            type: "success",
          });
          this.searchList();
        } else {
          uni.showToast({
            title: "关联失败！",
            type: "error",
          });
        }
      });
    },
    checkCode(item) {
      this.current.id = item.zcIdk;
      if (item.labelCode) {
        this.message_show = true;
      } else {
        this.messageConfirm();
      }
    },
    initList() {
      let p = this.form.orgId
        ? this.form.orgId + "," + this.form.stationId
        : this.form.stationId;
      let id = this.form.lineId ? [this.form.lineId] : [];
      let val = {
        state: 0,
        relevance: this.form.checklabel,
        lineIds: id,
        zcEqutype: this.form.equTypeId,
        orgOrStation: p,
        zcProfessionalCode: this.form.profession,
        page: this.form.page, // 页码
        size: 20, //每页数量
      };
      console.log(val);
      this.fetch(
        "post",
        this.$store.state.baseUrl + ZCCONTROLLER.GETEQUZCLIST,
        val,
		true
      ).then((res) => {
        if (this.form.page >= res.data.totalPages) {
          this.flog = false;
        }
        if (res && res.data.content && res.data.content.length > 0) {
          this.list = this.list.concat(res.data.content);
        }
      });
    },
  },
};
</script>

<style scoped>
.sss{
		position: absolute;
		right: 20px;
		top: 38px;
		color:#fff
	}
.select {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  vertical-align: middle;
}
.detail {
  height: auto;
  padding: 0px;
  margin-top: 10px;
}
.default-btns {
  width: 60px;
  color: #fff;
  border-radius: 30px;
  line-height: 36px;
  font-size: 14px;
  background: #307be0;
}
.list-btn {
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
/* .tables {
  padding: 2px;
  border: none;
}
.u-cell {
  padding: 8px 13px !important;
}
.u-radio-group {
  padding: 8px 13px !important;
}
.names {
  word-wrap: break-word;
  width: 90px;
  word-break: normal;
}
.u-tr {
  height: 35px;
}
.u-td {
  font-size: 14px !important;
} */
.click-btn {
  color: #fff;
  width: 80px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  background: #307be0;
}
.click-detail {
  color: rgb(96, 98, 102);
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  background: transparent;
}
.s1 {
  /* width: 50px; */
  background: rgb(165 169 178);
}
.table-item {
  width: 91.5%;
  margin: 0 auto;
}
.table-item > .items {
  background: #ffffff;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 16px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #3e3a39;
  position: relative;
}
.table-item > .items > .name {
  margin-bottom: 10px;
  display: flex;
    justify-content: space-between;
}
/* .table-item > .items > view:nth-child(2) {
  margin-bottom: 6px;
} */
</style>
